<template>
  <div>
    <AppNavbar :fetchProductData="fetchData"/>
    <h2>{{ title }}</h2>
    <div v-html="content"></div>
  </div>
</template>


<script>
  import AppNavbar from '@/components/AppNavbar.vue';
  import {computed, inject, onMounted, ref} from 'vue';
  import axios from 'axios';

  export default {
    components: {
      AppNavbar
    },
    setup() {
      const currentLocale = inject('locale'); // 假设在父组件或根实例中提供

      const i18nMessages = {
        'en': {
          title: 'Contact Information',
        },
        'zh-CN': {
          title: '联系方式',
        },
      };
      const t = (key) => {
        console.log("key:",key,currentLocale.value)
        return i18nMessages[currentLocale.value][key] || key;
      };
      const title = computed(() => t('title'));

      const content = ref(''); // 使用 ref 创建响应式变量

      const fetchData = async () => {
        try {
          const response = await axios.get(process.env.VUE_APP_DOMAIN_URL + `/text/textManager/queryByPage`, {
            params: { page: '联系我们' }
          });

          if (response.data && response.data.result) {
            const result = response.data.result;
            content.value = result && currentLocale.value === 'zh-CN' ? result.chinese : result.english;
          } else {
            console.error('No data or empty result returned.');
          }
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      };



      onMounted(() => {
        fetchData();
      });

      return { content, t,title, fetchData };
    }
  };
</script>

<style scoped>

</style>
